<template>
  <div class="add" ref="add">
    <!-- <header-text></header-text> -->
    <div class="adduser">
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">分类名称：</span>
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1" @blur="textarea1 = publick.clearinput(textarea1)"></el-input>
      </div>
      <!-- 显示状态 -->
      <div class="content">
        <span class="text">显示状态：</span>
        <el-switch
          style="display: block"
          v-model="value"
          active-color="#13ce66"
          active-value="1"
          inactive-value="0"
          active-text="已启用"
          inactive-text="已禁用"
        ></el-switch>
      </div>
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">排序：</span>
        <el-input type="Number" placeholder="请输入1~99的合法数字" v-model="sort" max="100" min="1"></el-input>
      </div>
      <!-- 备注 -->
      <div class="content">
        <span class="text">备注：</span>
        <el-input type="textarea" placeholder="请备注" v-model="remake" @blur="remake = publick.clearinput(remake)"></el-input>
      </div>
      <div class="but">
        <el-button type="primary" round @click="add()">确认添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import HeaderText from "../../components/from/HeaderText";
export default {
  data() {
    return {
      // 添加公告
      textarea1: "", //公告内容
      value: "", //显示状态
      sort: "", //排序
      remake: "" //备注
    };
  },
  components: {
    // HeaderText
  },
  mounted() {},
  methods: {
    //添加列表数据
    add() {
       let pid = this.$route.query.id;
       console.log(pid);
      this.$api
        .courseCateAdd({
          catename: this.textarea1,
          is_show: this.value,
          token: this.publick.token(),
          sort: this.sort,
          remake: this.remake,
          pid: pid
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          setTimeout(() => {
            this.$router.push({
              path: "/courseclassifylist",
              query: {
                type: "addlist"
              }
            });
            this.textarea1 = "";
            this.value = "";
            this.sort = "";
            this.remake = "";
            this.value_text = "";
          }, 1000);
        })
        .catch(res => {
          console.log(res);
        });
    }
  }
};
</script>

<style scoped>
.add {
  width: 100%;
  height: 89vh;
  overflow: auto;
  background: #eff2f7;
}
.adduser {
  width: 100%;
  /* height: 82.1vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 5vh;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 16px;
  display: block;
  width: 100px;
  text-align: right;
}
.but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
  width: 100%;
}
</style>
